<template>
    <div class="goodsinfo-container">
      <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
            <swiper :img="lunbotu"></swiper>
					</div>
				</div>
			</div>
        <!-- mui 中  card.html 页面的案例 -->
        <!-- 商品轮播图区域 -->
        


        <!-- 商品购买区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
			</div>


        <!-- 商品参数区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
        <div class="mui-card-footer">页脚</div>
			</div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import swiper from '../subComponents/swiper.vue';

export default {
  data(){
     return{
        lunbotu: [],
        id: this.$route.params.id
      }
  },
  created(){
    this.getRotationPic();
  },
  methods:{
    //从后台获取轮播的图片，商品的详情图片
        getRotationPic(){
            //this.$http.get(路径地址)
            this.$http.get("goods.json").then(result =>{
                if (result.body) {
                    console.log(result.body);
                    var obj = result.body.filter(item => {
                      if (item.id == this.id) {
                        return item;
                      }
                    })[0];
                    console.log(obj);
                    this.lunbotu = obj.pic;
                } else {
                    Toast("获取数据失败");
                }
            })
        },
        
    },
  components: {
     swiper
  }
}
</script>



<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
